<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<html>
</head>
<body>
        <h3 align="center">注册界面</h3>
        <hr />
        <form action="#" method="get" onsubmit="return checkSub()">
            <table border="0px" cellspacing="0" cellpadding="2px" align="center">
                <tr>
                    <td width="80px">用户名：</td>
                    <td width="400px">
                        <input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/>
                        <span id="unameSpan">
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/>
                        <span id="pwdSpan">
                        <font>要求6-8位密码，首位必须为字母</font>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td>确认密码：</td>
                    <td>
                        <input type="password" name="pwd2" id="pwd2" value="" " onblur="checkPwd2()"/>
                        <span id="pwd2Span"></span>
                    </td>
                </tr>
        
                <head>
<title>Document</title>
    <script>
        //常见验证码
            function createCode(){
                //创建随机4位数字，math.floor向下取整
                var code=Math.floor(Math.random()*9000+1000);
                //获取元素对象
                var  span=document.getElementById("codeSpan");
                //将数字存放到span中
                span.innerHTML=code;
                //给span添加背景图片
            }
        //验证用户名
            function checkUname(){
                //获取用户获得用户名信息
                    var uname=document.getElementById("uname").value;
                //创建校验规则,用户名2-4个
                    var reg=/^[\u4e00-\u9fa5]{2,4}$/
                //获取span对象
                    var unameSpan=document.getElementById("unameSpan");
                //开始交验
                    if(unameSpan==""||unameSpan==null){
                        //输入校验结果
                        unameSpan.innerHTML="*用户名不能为空";
                        unameSpan.style.color="red";
                        return false;
                    }else if(reg.test(uname)){
                        //输入校验结果
                        unameSpan.innerHTML="*用户名通过";
                        unameSpan.style.color="green";
                        return true;
                    }else{
                        //输入校验结果
                        unameSpan.innerHTML="*用户名格式不符"
                        unameSpan.style.color="red";
                        return false;
                    }
                
            }
        //验证密码
            function checkPwd(){
                //获取用户获得用户名信息
                    var upwd=document.getElementById("pwd").value;
                //创建校验规则,密码要求6-8位，首位为字母，后面5-7位是数字
                    var reg=/^[a-z]\w{5,7}$/;
                //获取span对象
                    var span=document.getElementById("pwdSpan");
                //开始交验
                    if(span==""||span==null){
                        //输入校验结果
                        span.innerHTML="*密码不能为空";
                        span.style.color="red";
                        return false;
                    }else if(reg.test(upwd)){
                        //输入校验结果
                        span.innerHTML="*密码通过";
                        span.style.color="green";
                        return true;
                    }else{
                        //输入校验结果
                        span.innerHTML="*密码格式不符"
                        span.style.color="red";
                        return false;
                    }
    //第一次密码为a123456，第二次密码为a1234567，则修改的第一次密码，确认密码也会重新校验	
                checkPwd2();
            }
            //校验确认密码
                function checkPwd2(){
                    //获取第一次校验密码
                        var pwd=document.getElementById("pwd").value;
                    //获取确认密码
                        var pwd2=document.getElementById("pwd2").value;
                    //获取span对象
                        var span=document.getElementById("pwd2Span");
                    //比较前两次密码是否相同
                        if( pwd2==""|| pwd2==null){
                        //输入校验结果
                        span.innerHTML="*密码不能为空";
                        span.style.color="red";
                        return false;
                    }else if(pwd===pwd2){
                        //输入校验结果
                        span.innerHTML="*密码通过";
                        span.style.color="green";
                        return true;
                    }else{
                        //输入校验结果
                        span.innerHTML="*密码不同，请重新输入"
                        span.style.color="red";
                        return false;
                    }
                }
            //校验手机号
                function checkPhone(){
                    return checkField("phone",/^1[3456789]\d{9}$/);
                }
            //校验邮箱
              
           
                    function checkSub(){
                        checkUname();
                        checkPwd();
                        checkPwd2();
                        checkmail();
                        checkPhone();
                        checkFav();
                        checkAddress();
                        checkCode();
                        return checkUname()&&checkPwd()&&checkPwd2()&&checkmail()&&checkPhone()&&checkFav()&&checkAddress()&&checkCode();
                    }
            //封装校验：相同的保留，不同的传参
                function checkField(id,reg){
                    //获取用户数据
                        var inp=document.getElementById(id);
                        var	va=inp.value;
                        var	alt=inp.alt;
                    //创建校验规则
                    //获取span对象
                        var span=document.getElementById(id+"Span");
                    //开始校验
                        if(va==""||va==null){
                        //输入校验结果
                            span.innerHTML="*"+alt+"不能为空";
                            span.style.color="red";
                            return false;
                        }else if(reg.test(va)){
                        //输入校验结果
                            span.innerHTML="*"+alt+"通过";
                            span.style.color="green";
                            return true;
                        }else{
                        //输入校验结果
                            span.innerHTML="*"+alt+"格式不符";
                            span.style.color="red";
                            return false;
                    }
                }
    </script>
</body>
</html>